XHTML (Extensible Hypertext Markup Language) একটি শক্তিশালী এবং পঠনযোগ্য মার্কআপ ভাষা, যা HTML-এর উন্নত সংস্করণ। যেহেতু এটি XML-এর উপর ভিত্তি করে তৈরি, তাই এটি অনেক কঠোর নিয়ম অনুসরণ করে। তবে, এক্সএইচটিএমএল ডকুমেন্টে JavaScript লাইব্রেরি এবং ফ্রেমওয়ার্ক, যেমন jQuery এবং React ব্যবহার করা সম্ভব। এগুলো ব্যবহার করে আপনি এক্সএইচটিএমএল ডকুমেন্টে ডাইনামিক ইন্টারঅ্যাকশন এবং উন্নত ইউজার ইন্টারফেস (UI) তৈরি করতে পারবেন।
১. jQuery এর সাথে XHTML ব্যবহার
jQuery একটি জনপ্রিয় JavaScript লাইব্রেরি, যা DOM (Document Object Model) ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং এবং AJAX অনুরোধের জন্য ব্যবহৃত হয়। jQuery এক্সএইচটিএমএল ডকুমেন্টে ব্যবহার করা বেশ সহজ। jQuery-এর মাধ্যমে আপনি দ্রুত এবং সহজভাবে ডকুমেন্টের কনটেন্ট পরিবর্তন, অ্যানিমেশন, ফর্ম হ্যান্ডলিং ইত্যাদি করতে পারেন।
১.১. jQuery লাইব্রেরি এক্সএইচটিএমএল ডকুমেন্টে যুক্ত করা
XHTML ডকুমেন্টে jQuery ব্যবহার করতে প্রথমে আপনাকে jQuery লাইব্রেরি ইনক্লুড করতে হবে। এটি সাধারণত <script> ট্যাগের মাধ্যমে <head> সেকশনে যুক্ত করা হয়।
উদাহরণ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>XHTML with jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeText").click(function() {
$("#text").text("This text was changed by jQuery!");
});
});
</script>
</head>
<body>
<h1>XHTML with jQuery</h1>
<p id="text">Click the button to change this text.</p>
<button id="changeText">Change Text</button>
</body>
</html>
এখানে, jQuery লাইব্রেরি ডকুমেন্টে লোড করা হয়েছে এবং $(document).ready() ফাংশন ব্যবহার করা হয়েছে যাতে jQuery কোডটি ডকুমেন্টের উপাদানগুলি লোড হওয়ার পর কার্যকরী হয়। বাটনে ক্লিক করার মাধ্যমে প্যারাগ্রাফের টেক্সট পরিবর্তিত হবে।
২. React এর সাথে XHTML ব্যবহার
React একটি জনপ্রিয় JavaScript ফ্রেমওয়ার্ক, যা ইউজার ইন্টারফেস (UI) তৈরি করার জন্য ব্যবহৃত হয়। React আপনাকে কম্পোনেন্ট ভিত্তিক UI ডিজাইন করতে সাহায্য করে। React কে এক্সএইচটিএমএল ডকুমেন্টে ব্যবহার করা কিছুটা জটিল হতে পারে, কারণ React সাধারণত HTML/JSX ব্যবহার করে এবং JSX নিজে একটি সিনট্যাক্স যা XML-এর মতো দেখালেও এটি সম্পূর্ণ আলাদা। তবে, React ডেভেলপমেন্টের জন্য সাধারণত HTML ব্যবহার করা হয়, এবং JSX React কোডের মধ্যে ব্যবহৃত হয়।
২.১. React ইনস্টলেশন এবং ব্যবহার
React ব্যবহারের জন্য আপনাকে প্রথমে React, ReactDOM এবং Babel লাইব্রেরি ইন্সটল করতে হবে। React কোড সাধারণত JSX-এ লেখা হয়, কিন্তু ব্রাউজারকে এটি বুঝতে হলে Babel ট্রান্সপাইলার ব্যবহার করতে হয়। এক্সএইচটিএমএল ডকুমেন্টে React ব্যবহারের জন্য React এর স্ক্রিপ্ট ফাইল লোড করা প্রয়োজন।
উদাহরণ: React এর সাথে XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>React with XHTML</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<h1>React with XHTML Example</h1>
<div id="root"></div>
<script type="text/babel">
const element = React.createElement('h2', null, 'Hello from React!');
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
</html>
এখানে, আমরা React এবং ReactDOM স্ক্রিপ্ট লোড করেছি এবং একটি <div> ট্যাগের মধ্যে React কম্পোনেন্ট রেন্ডার করেছি। JSX ব্যবহার করে React কম্পোনেন্ট তৈরি করা হয়েছে এবং এটি <div id="root"> ট্যাগে রেন্ডার করা হয়েছে।
৩. এক্সএইচটিএমএল, jQuery এবং React এর মধ্যে পার্থক্য
৩.১. সিনট্যাক্স
- XHTML: XHTML একটি XML ভিত্তিক ভাষা, যার ফলে এটি অনেক বেশি কঠোর সিনট্যাক্স অনুসরণ করে। সকল ট্যাগ অবশ্যই বন্ধন সহ থাকতে হবে, এবং অ্যাট্রিবিউটগুলির মান কোটেশনে থাকতে হবে।
- jQuery: jQuery, HTML এবং JavaScript-এর একটি লাইব্রেরি যা ব্রাউজারের DOM ম্যানিপুলেশন সহজতর করে। এটি JavaScript-এর উপর ভিত্তি করে, কিন্তু HTML এর সাথে আরও কার্যকরীভাবে ইন্টারঅ্যাক্ট করতে সাহায্য করে।
- React: React একটি ফ্রেমওয়ার্ক যা কম্পোনেন্ট ভিত্তিক অ্যাপ্লিকেশন নির্মাণে সহায়ক। React কোড সাধারণত JSX (JavaScript XML) ব্যবহার করে লেখা হয়, যা HTML এর মতো হলেও JavaScript সিনট্যাক্স অনুসরণ করে।
XHTML ডকুমেন্টে jQuery এবং React ব্যবহার করা সম্ভব এবং এটি আপনার ওয়েব পেজের ইন্টারঅ্যাকটিভিটি এবং ইউজার ইন্টারফেসের ফাংশনালিটি বাড়াতে সহায়তা করে। jQuery দিয়ে DOM ম্যানিপুলেশন সহজে করা যায়, যেখানে React ব্যবহার করে আপনি ডাইনামিক এবং কম্পোনেন্ট ভিত্তিক UI তৈরি করতে পারেন। তবে, XHTML এ ব্যবহারের সময় আপনাকে সিনট্যাক্স এবং নিয়মের প্রতি মনোযোগ দিতে হবে, কারণ এটি HTML এর তুলনায় আরও কঠোর।
Read more
